<template>
  <div style="position: relative; display: flex; scroll-behavior: auto; width: 100%; height: 100%">
    <a-upload @change="onUpload" @success="onSuccess" />
    <a-button type="primary" @click="onClick">点我</a-button>
  </div>
</template>

<script lang="ts" setup>
import { http } from '@/utils/axios'
import { ref } from 'vue'

const testItem = ref('123')

function onUpload(info: any) {
  console.log('onUpload -->', info)
  // console.log(info[0].file)

  let file = info[0].file

  // console.log(info[0].file.target.result)
  if (info[0].percent == 1) {
    const reader = new FileReader()
    reader.onload = function (e) {
      const base64 = e.target!.result
      console.log('---> ', base64) // 输出图片的Base64编码

      let res = window.atob(base64!.toString())
      console.log(res)
    }
    reader.readAsDataURL(file)
  }
}

function onSuccess(info: any) {
  console.log('onSuccess -->', info)

  const reader = new FileReader()
  let res = reader.readAsDataURL(info[0].url)
  console.log(res)
}

function onClick() {
  http({
    url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/general_basic',
    method: 'post',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Credentials': true,
      Accept: 'application/json'
    }
  }).then((res) => {
    console.log(res)
  })
}
</script>

<style lang="less" scoped></style>
